(function(){

    // 定义一个用于包裹DOM元素的类
    class Wrapper {
        // 构造函数接受一个DOM元素
        constructor( element ) {
            // 用实例变量 $element 来保存参数传入的 DOM元素
            this.$element = element ;
        }
        on( type , listener , capture = false ){
            this.$element.addEventListener( type , listener , capture );
        }
        click( listener ) {
            this.on( 'click' , listener );
        }
    }

    // 选择匹配参数指定选择器的首个元素并将其包裹为Wrapper实例
    const $ = selector => {
        let element = document.querySelector( selector );
        if( element ) {
            return new Wrapper(element);
        }
        return null ;
    }

    // 选择 `.second>.get` 选择元素并绑定点击事件监听器
    $( '.second>.get' ).click( function(){

        // 确定请求路径
        const uri = '/loong';

        // 在浏览器环境中可以使用 window.fetch 发送异步请求，它返回一个Promise实例
        let promise = fetch( uri ); // 默认发送的是 GET 请求
        promise.then( resp => {
            console.log( resp );
            console.log( resp.constructor );
            // 因为服务端返回的是JSON格式的字符串，
            // 所以调用 resp.json() 可以读取服务端返回的JSON字符串并将其解析为JavaScript对象
            return resp.json();
        }).then( loong => {
            console.log( loong );
        });
    });

    // 选择 `.second>.post` 选择元素并绑定点击事件监听器
    $( '.second>.post' ).click( ()=>{
        const uri = '/loong';
        // 创建请求头
        const headers = new Headers();
        headers.append( 'content-type' , 'application/json' );
        const body = JSON.stringify( { id: 5667 , name: '敖钦' } );
        // 确定对请求对象进行初始化的配置信息
        const init = {
            // 指定请求方式
            method: 'POST',
            // 设置请求头
            headers, /* `headers` 是 `headers: headers` 的缩写 */
            // 设置请求体
            body /* `body` 是 `body: body` 的缩写 */
        }

        fetch( uri , init )
        .then( resp => resp.json() )
        .then( result => console.log( result ) );
    });

    
    // 选择 `.second>.post` 选择元素并绑定点击事件监听器
    $( '.second>.put' ).click( ()=>{
        const uri = '/loong';
        // 确定对请求对象进行初始化的配置信息
        const init = {
            // 指定请求方式
            method: 'PUT',
            // 设置请求头
            headers: {
                'content-type': 'application/json'
            }, 
            // 设置请求体
            body: JSON.stringify( { id: 6778 , name: '敖顺' } )
        }

        const req = new Request( uri , init );

        fetch(req).then( resp => resp.json() )
                  .then( result => console.log( result ) );
    });

    // 选择 `.second>.delete` 选择元素并绑定点击事件监听器
    $( '.second>.delete' ).click( ()=>{
        const url = '/loong';
        const init = {
            method: 'DELETE',
            headers: {
                'content-type': 'application/json'
            }, 
            body: JSON.stringify( { id: 7889 , name: '敖钦' } )
        }

        const req = new Request( url , init );

        fetch(req).then( resp => resp.json() )
                  .then( result => console.log( result ) );
    });

    // 选择 `.second>.head` 选择元素并绑定点击事件监听器
    $( '.second>.head' ).click( ()=>{
        fetch( '/loong' ,{ 
            method: 'HEAD' 
        }).then( resp => console.log( resp ) );
    });


})();